<template>
	<div class="warpper">
		<div class="header">
			<span v-if="store.state.user.isLogin==false">
				<a href="/login">你好，请登录</a>
				<a href="/register" class="red">免费注册</a>&nbsp;&nbsp;|
			</span>
			<span v-else>
				<a href="/profile?activeIndex=1">你好，{{ store.state.user.name }}</a>
				<a href="#" @click="logout">退出</a>&nbsp;&nbsp;|
			</span>
			<a href="/profile?activeIndex=3">我的订单</a>
		</div>
	</div>
</template>

<script setup>
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore()
const router = useRouter()

const logout=()=>{
	window.localStorage.setItem("token","");
	store.commit("setIsLogin",false);
	router.push("/");
	console.log('退出成功');
}
</script>

<style lang="less" scoped>
.warpper{
	background-color: #e3e4e5;
	height: 30px;
	.header{
		width: var(--content-width);
		margin: 0 auto;
		text-align: right;
		line-height: 30px;
		a{
			color: var(--font-gray);
			&:hover{
				color: var(--font-red);
			}
			margin-left: 10px;
		}
		.red{
			color: var(--font-red);
		}
	}
}
</style>